<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>中南海保险</title>
	<link href="http://cdn.staticfile.org/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link rel="shortcut icon" href="img/警徽2.ico"/>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	
	<body>
		<div class="form-control" >
			<div class="row clearfix" id = "dv01">
				<div class="col-md-12 column" >
					<nav class="navbar navbar-default" role="navigation" >
						<div class="navbar-header">
							<img src="img/logo.png" style="width: 120px; height: 50px;" />
							 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="user.html">首页</a>
						</div>
						<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
							<ul class="nav navbar-nav" v-for="a in circles">
								<li class="active" @click="type1(a.id)"   >
									 <a href="type.html" >{{a.tname}}</a>
								</li>
								 <li  @click="type2(a.id)">
									 <a href="type.html">保意外险</a>
								</li>
								<li>
									 <a href="type.html"@click="type3()">企业保险</a>
								</li>
								<li>
									 <a href="type.html"@click="type4()">旅行保险</a>
								</li>
								<li class="dropdown">
									 <a href="#" class="dropdown-toggle" data-toggle="dropdown">全部保险<strong class="caret"></strong></a>
									<ul class="dropdown-menu">
										<li>
											 <a href="jiangkan.html">健康保险</a>
										</li>
										<li>
											 <a href="yiwai.html">意外保险</a>
										</li>
										<li>
											 <a href="qiye.html">企业保险</a>
										</li>
										<li>
											 <a href="lvxing.html">旅行保险</a>
										</li>
									</ul>
								</li> 
							</ul>
							<form class="navbar-form navbar-left" role="search">
								<div class="form-group">
									<input type="text" class="form-control" />
								</div> <button type="submit" class="btn btn-default">搜索</button>
							</form>
							<ul class="nav navbar-nav navbar-right">
								<li>
									 <a href="#">登录</a>
								</li>
								<li>
									 <a href="#">注册</a>
								</li>
								<li class="dropdown">
									 <a href="#" class="dropdown-toggle" data-toggle="dropdown">用户信息<strong class="caret"></strong></a>
									<ul class="dropdown-menu">
										<li>
											 <a href="#">Action</a>
										</li>
										<li>
											 <a href="#">Another action</a>
										</li>
										<li>
											 <a href="#">Something else here</a>
										</li>
										<li class="divider">
										</li>
										<li>
											 <a href="#">Separated link</a>
										</li>
									</ul>
								</li>
							</ul>
						</div>
					</nav>
					<div class="carousel slide" id="carousel-363347">
						<ol class="carousel-indicators">
							<li class="active" data-slide-to="0" data-target="#carousel-363347">
							</li>
							<li data-slide-to="1" data-target="#carousel-363347">
							</li>
							<li data-slide-to="2" data-target="#carousel-363347">
							</li>
						</ol>
						<div class="carousel-inner">
							<div class="item active">
								<img alt="140x140" src="img/轮播1.png" style="width: 2000px; height: 466px;" />
							</div>
							<div class="item">
								<img alt="140x140" src="img/轮播2.png" style="width: 2000px; height: 466px;" />
							</div>
							<div class="item">
								<img alt="140x140" src="img/轮播3.png
" style="width: 2000px; height: 466px;"/>
							</div>
						</div> <a class="left carousel-control" href="#carousel-363347" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-363347" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
					</div>
				</div>
			</div>
			<div class="container">
				<div class="col-lg-12 column">
					<div  v-for="c in circles" >
						<div class="col-lg-4" >
							<div class="thumbnail" @click="tzdetail(c.typeid)">
								<img alt="1000x200"  v-bind:src="c.img" />
								<div class="caption"  style="display: block;" >
									<h3 align="center">
										{{c.pname}}
									</h3>
									<p align="center">
										{{c.desc}}
									</p>
									<p align="right" style="color: red;">
										{{c.price}} ￥
									</p>
									<p>
										 <a class="btn btn-primary" href="#">立即投保</a> <a class="btn" href="#">查看详情</a>
									</p>
								</div>
							</div>
						</div>
						
					</div>
					
					</div>

				</div>
			</div>
			<div class="row clearfix">
				<div class="col-md-12 column">
					<hr/>
					<p class="text-center text-info">
						 <em></em> 版权所有 © 中南海保险公司（集团）股份有限公司 未经许可不得复制、转载或摘编，违者必究! <small></small><br/>
						 <em></em> Copyright © Ping an insurance (group) company of china ,LTD. all rights reserved<small></small> <br/>
						 <em></em> ICP许可证号 豫ICP备06118290号-7<a href="http://www.beian.gov.cn/portal/registerSystemInfo?WT.mc_id=T00-BD-155-051-003570&WT.srch=1&recordcode=44030402000932"><img src="img/警徽3.ico">豫公网安备 44030402000932号</a> <small></small> <br/>
						 <em></em>本网支持IPV6<small></small> 
					</p>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#dv01",
				data:{
					circles:[
						{
							
						}
					
					]
				},
				methods:{
					tzdetail(typeid){
						location.href="jiankang.html?typeid="+typeid
					}
					
				}
			})
			$(function(){
				
					$.get("http://localhost:8080/api/iProduct/IProduct.selectMhcx.do?typeid="+1,null,function(res){
						if(res.code==1){
							vm.circles=res.data;
							console.log(vm.circles);
						}
					})
				
			})

			$(function(){
				$.get("http://localhost:8080/api/iType/IType.all.do",null,function(ress){
					if(ress==1){
						vm.circles=ress.data;
						console.log(vm.circles);
					}
				})
			})
			//页面加载的时候就执行
			// $(function(){
			// 	$.get("http://localhost:8080/api/iProduct/IProduct.selectMhcx.do?typeid=2",null,function(res){
			// 		if(res.code==1){
			// 			vm.circles=res.data;
			// 			console.log(vm.circles);
			// 		}
			// 	})
			// })
		</script>
	</body>
</html>
